# Component: Tag Button

Atomic interactive element for taxonomy and filtering

Utility Atom

### BEM Anatomy

| Type      | Class Name | Description                                                                         |
| --------- | ---------- | ----------------------------------------------------------------------------------- |
| ==Block== | `.as-tag`  | The core button component. Manages tight margins for inline wrapping in tag clouds. |
| Element   | `__title`  | The heading wrapper (`h5`). Inherits font size from the button's CSS variables.     |
| Element   | `__count`  | An optional span displaying usage frequency (e.g., "(12)") next to the label.       |

### Active State & Sizing

The component uses an `Outline` logic based on the `IsActive` state: active tags are solid dark, while inactive tags are outlined. Font size can be overridden dynamically via a CSS variable (`--bs-btn-font-size`) passed through the component's style property.

##### Generated HTML (Active with Count)

```html
<!-- Active Solid State -->
<button class="btn btn-dark btn-sm as-tag">
    <h5 class="as-tag__title">
        <i class="fa-solid fa-tag"></i> Development
        <span class="as-tag__count"> (5)</span>
    </h5>
</button>

<!-- Inactive Outlined State -->
<button class="btn btn-outline-dark btn-sm as-tag">
    <h5 class="as-tag__title">Design</h5>
</button>
```

##### SCSS

```scss
.as-tag {
  // Tight spacing for cloud layout
  margin-right: 0.25rem;
  margin-bottom: 0.25rem;

  &__title {
    // Syncs h5 size with button scale
    font-size: var(--bs-btn-font-size);
    font-weight: normal;
    margin: 0;
  }
}
```
